<template>
  <div>
    <div>
      <tab
        :tabIndex="tabIndex"
        :tabList="tabList"
        @tabChange="getList"
        :tabWidth="'50'"
        :tabSize="'0.3rem'"
      ></tab>
    </div>

    <div class="padding-lr20">
      <div class="header bg-ff margin-b20">
        <div class="header_t flex justify-between border-bottom text-center">
          <div class="c-99 word-all">申请时间</div>
          <div class="input" @click="show=true">{{start}}</div>
          <span>--</span>
          <div class="input" @click="shows=true">{{end}}</div>
        </div>
        <div class="header_c flex justify-between border-bottom text-center">
          <div class="c-99 word-all">项目名称</div>
          <input type="text" class="h-99p text-left flex-grow padding-l75" v-model="title" />
        </div>
        <div class="sure margin-t40 text-center bg-ff0 text-ff" @click="getData(1)">查询</div>
      </div>
    </div>

    <!-- 列表 -->
    <div class="bg-ff" v-if="tabIndex == 0">
      <div
        class="list_li flex padding-20 border-bottom"
        v-for="(item,index) in list"
        :key="index"
        @click="to('/card/', item.enterprise_id)"
      >
        <div class="cover_img margin-r24">
          <img class="wh-100p" :src="item.logo?item.logo:$nodata" alt />
        </div>
        <div class="flex flex-column justify-around flex-grow">
          <div class="rem-32px text-cut-two">{{item.enterprise_title}}</div>
          <div class="c-66 rem-26px flex">
            <div class="w-50p">{{item.vip}}</div>
            <div class="w-50p">品类：{{item.type_name}}</div>
          </div>
          <div class="c-66 rem-26px">申请时间：{{item.created_time}}</div>
        </div>
      </div>
    </div>

    <!-- 资讯列表 -->
    <div class="bg-ff" v-if="tabIndex == 1">
      <div
        class="list_li flex padding-20 border-bottom"
        v-for="(item,index) in list"
        :key="index"
        @click="to('/recruit/news', item.article_id)"
      >
        <div class="cover_img margin-r24">
          <img class="wh-100p" :src="item.article_thumb?item.article_thumb:$nodata" alt />
        </div>

        <div class="flex flex-column justify-around flex-grow">
          <div class="rem-32px text-cut-two">{{item.article_title}}</div>
          <!-- <div class="c-66 rem-26px flex">
            <div class="w-50p">{{item.vip}}</div>
            <div class="w-50p">品类：{{item.type_name}}</div>
          </div>-->
          <div class="c-66 rem-26px text-cut-one">源自：{{item.enterprise_title}}</div>
          <div class="c-66 rem-26px">申请时间：{{item.created_time}}</div>
        </div>
      </div>
    </div>

    <load @loadData="getData" :list="list" :total="total" :nodata="list.length<10?true:false"></load>

    <!-- 时间浮层 -->
    <van-popup v-model="show" position="bottom">
      <van-datetime-picker
        v-model="currentDate"
        type="date"
        title="选择年月日"
        :min-date="minDate"
        :max-date="maxDate"
        @confirm="sure"
        @cancel="show = false"
      />
    </van-popup>
    <van-popup v-model="shows" position="bottom">
      <van-datetime-picker
        v-model="currentDates"
        type="date"
        title="选择年月日"
        :min-date="minDates"
        :max-date="maxDates"
        @confirm="sures"
        @cancel="shows = false"
      />
    </van-popup>
  </div>
</template>

<script>
import load from "../../components/load";
import tab from "../../components/tab";
export default {
  components: {
    load,
    tab
  },
  data() {
    return {
      tabIndex: 0,
      tabList: ["招商列表", "资讯列表"],
      list: [],
      total: 0,
      minDate: new Date(1900, 1, 1),
      maxDate: new Date(2300, 12, 31),
      minDates: new Date(1900, 1, 1),
      maxDates: new Date(2300, 12, 31),
      start: "",
      end: "",
      currentDate: new Date(),
      currentDates: new Date(),
      title: "",
      show: false,
      shows: false
    };
  },
  mounted() {
    this.addDate();
    this.getData(1, true); // true 不加入时间筛选
  },
  methods: {
    getList(e) {
      this.title = "";
      this.tabIndex = e;
      this.getData(1, true);
    },
    addDate() {
      let date = {
        year: new Date().getFullYear(),
        month: new Date().getMonth() + 1,
        date: new Date().getDate()
      };
      this.start = date.year + "-" + date.month + "-" + date.date;
      this.end = date.year + "-" + date.month + "-" + date.date;
    },
    getData(page, type_time) {
      this.$axios.post( "/wap/personal/agent", {
        token: window.localStorage.getItem("token"),
        page: page,
        limit: 10,
        title: this.title ? this.title : "",
        start_time: type_time ? "" : this.start,
        end_time: type_time ? "" : this.end + " 23:59",
        type: parseInt(this.tabIndex) + 1
      }).then(res => {
        if (page == 1) {
          this.list = [];
          this.topList = [];
        }
        if (res.data.data.length == 0) {
          this.total++;
          return false;
        }
        for (let i in res.data.data) {
          this.list.push(res.data.data[i]);
        }
      });
    },
    to(path, id) {
      this.$router.push({
        path: path,
        query: {
          id: id
        }
      })
    },
    sure(e) {
      this.start =
        e.getFullYear() + "-" + (e.getMonth() + 1) + "-" + e.getDate();
      this.show = false;
    },
    sures(e) {
      this.end = e.getFullYear() + "-" + (e.getMonth() + 1) + "-" + e.getDate();
      this.shows = false;
    }
  }
};
</script>

<style scoped>
.cover_img {
  width: 2.26rem;
  min-width: 2.26rem;
  height: 1.72rem;
  display: block;
}
/* 未读 */
.Unread {
  position: absolute;
  right: 0;
  top: 0;
  width: 0.18rem;
  height: 0.18rem;
  border-radius: 50%;
  background: #ff0000;
}
/*  */
.header {
  padding: 0 0.14rem 0.4rem;
  border-radius: 0.15rem;
  margin-top: 0.2rem;
}
.header_t {
  height: 1rem;
  line-height: 1rem;
}
.header_t .input {
  width: 2.04rem;
  text-align: center;
}
.header_c {
  height: 1rem;
  line-height: 1rem;
}
.van-icon-arrow {
  color: #999;
}
/*  */
.border-bottom:last-of-type {
  border: none;
}
</style>